<template>
  <div class="cartoonManage">
    <div style="text-align:left">
      <h2>全部用户</h2>
    </div>
    <el-table
      :data="user_data"
      stripe
      style="width: 100%"
      height="70vh"
      >
      <el-table-column
        label="用户名"
        width="180">
        <template slot-scope="scope">
          <div class="author_img">
            <img :src="'http://192.168.44.1:8000/static/headImg/'+scope.row.username+'.png'" class="head_image">
            <div style="margin-left: 10px">{{ scope.row.username }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机号"
        width="180">
      </el-table-column>
      <el-table-column
        label="是否活跃"
        width="180">
        <template slot-scope="scope">
          <div v-if="scope.row.is_active">
            是
          </div>
          <div v-else>否</div>
        </template>
      </el-table-column>
      <el-table-column
        label="上次登录时间"
        width="180">
        <template slot-scope="scope">
          <div>
            {{scope.row.last_login.substr(0,10)}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="注册时间"
        >
        <template slot-scope="scope">
          <div>
            {{scope.row.date_joined.substr(0,10)}}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="height:100px"></div>
  </div>
</template>

<script>
import {getAllUser} from '@/api/user'
export default {
  data() {
    return {
      user_data: []
    }
  },
  async mounted() {
    let user_data = await getAllUser()
    this.user_data = user_data.user_data
    console.log(user_data)
  },
}
</script>

<style>
.cartoonManage{
  padding: 10px 0 0 50px;
}
.author_img{
  display: flex;
  justify-content: flex-start;
}
.head_image{
  width:20px;
  height:20px;
  border-radius: 50px;
}
</style>